<template>
  <div class="anLaborRank">

    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Blog_Analysis' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Blog_Analysis</el-breadcrumb-item>
        <el-breadcrumb-item>anLaborRank</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="Gcontainer">
      <div id="three" >
        <dv-percent-pond :config="progress_config" style="width:100%;height:100%;" v-if="show_progress"/>
        <dv-scroll-ranking-board :config="rank_config" style="width:40%;height:100%; position: absolute;left: 0; margin-left: 20px; overflow: hidden;" v-if="!show_progress"/>
        <div id="bar_rank" v-show="!show_progress"></div>
      </div>

      <div style="margin-top: 22px;">
      <h1 style="text-align: center;">掘金博客作者创作数据分析</h1>
      
        <h2>结论与建议</h2>
        <p>
          在掘金博客上，众多作者以其丰富的经验和技能创作了大量技术文章，为社区的发展做出了贡献。为了更好地了解作者的创作情况和贡献，我们对作者创作的文章数进行了统计，并按照文章数进行了排名。

根据数据，排名前五的作者分别是：

量子位 - 57篇文章
终有救赎 - 51篇文章
Yiko - 48篇文章
政采云技术 - 45篇文章
anyup - 44篇文章
这些作者在掘金博客上创作了大量的文章，内容涉及多个技术领域，为读者提供了丰富的学习资源。他们的经验和见解对于技术交流和社区发展起到了积极的推动作用。

值得注意的是，排名前五的作者中，有四位作者（量子位、终有救赎、Yiko、anyup）的文章数均超过了40篇，表现出色。而其他作者的创作情况也有着不同的特点和发展潜力。这说明了掘金博客有着多样化的作者群体和创作风格，满足了不同读者的需求和口味。

此外，从作者的名称可以看出，有些作者是技术领域的知名人士或者有影响力的专家，而有些作者则是普通的开发者或者技术爱好者。这说明掘金博客是一个平等、开放的平台，任何有意愿和才华的作者都有机会展示自己的思想和才华。

总之，通过分析掘金博客的作者创作情况，我们可以更好地了解作者的贡献和特点。这有助于我们更好地支持和发展优秀作者，为读者提供更多优质的内容和服务，推动技术交流和社区的发展。     </p>
    <img src="http://127.0.0.1:8888/static/picture/laborRank_matplotlib_img.png" alt="" srcset="">

        <div style="height: 100px;width: 200px;"></div>
    </div>
    </div>

  </div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      // 进度条
      show_progress: true,
      // 进度条配置
      progress_config: {
        value: 0,
        borderWidth: 5,
        borderRadius: 10,
        borderGap: 5,
        colors: ['#01c4f9', '#c135ff'],
      },

      // 排名配置
      rank_config: {
        data: [
        {
            "author_url": "https://juejin.cn/user/2634854380340008/posts",
            "author_lever": "创作等级LV.7",
            "name": "京东云开发者",
            "author_articles": "1.0k",
            "author_watchs": "1.7m",
            "author_fans": "11k",
            "value": 135
        }],
        sort: true,
        carousel: 'single',
        unit: ' 篇文章'
      },

      // 柱状图数据
      rank_bar_chartDome: null,
      rank_bar_myChart: null,
      rank_bar_option: null,
      rank_bar_xAxis: {
        type: 'category',
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },
      rank_bar_Ydata: [],
    }
  },
  mounted() {
    // 加载数据
    this.getLaborRank()

    // 让进度条动起来
    setInterval(()=>{
      if (this.progress_config.value < 99) {
        //响应式修改数据
        this.$set(this.progress_config,'value',this.progress_config.value+1)
        //重新生成一个新的对象，进行赋值
        this.progress_config={...this.progress_config}
      } 
    },10)
  },
  methods: {
    getLaborRank() {
      // http://127.0.0.1:8888/laborRank
      this.$http({
        url: '/laborRank',
        method: 'post'
      }).then(res => {
        console.log(res)
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取劳模排行数据失败')
        } else {
          this.$notify({
            title: '成功',
            message: '后台数据处理成功，正在拼命加载',
            type: 'success'
          });
          // 切换页面展示元素
          this.show_progress = false
          // 排名轮播
          this.rank_config.data = res.data.data
          
  
          // echarts柱状图
          // 排名
          var xdata = []
          var ydata = []
          res.data.data.forEach(item => {
            xdata.push(item.name)
            ydata.push(item.value)
          })
          this.rank_bar_xAxis.data = xdata
          this.rank_bar_Ydata = ydata
          
          // 处理完数据再绘图
          this.draw_rank_bar()
          }
      }).catch(res => {
        console.log(res);
      })
    },

    // 排名柱状图 bar_rank
    draw_rank_bar() {
      this.rank_bar_chartDome = document.getElementById('bar_rank');
      console.log(this.rank_bar_chartDome)
      this.rank_bar_myChart = echarts.init(this.rank_bar_chartDome);

      this.rank_bar_option = {
        title: {
          show: true,
          text: "劳模排名",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            magicType: { type: ['line', 'bar'] },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.rank_bar_xAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.rank_bar_Ydata,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            label: {
                show: true, //开启显示
                position: 'inside', //在上方显示
                textStyle: { //数值样式
                color: 'oldlace',//字体颜色
                fontSize: 10//字体大小
                }
            }
          }
        ]
      };

      this.rank_bar_option && this.rank_bar_myChart.setOption(this.rank_bar_option);
      setTimeout(()=>{
        this.rank_bar_myChart.resize()
      },1000)
    },


  }
}
</script>

<style scoped>
.anLaborRank {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 5px;
}
/* 去除滚动栏，保留滚动效果 */
.anLaborRank::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.Gcontainer {
  margin-top: 5px;
  width: 100%;
  height: 98%;
  /* background-color: azure; */

  box-sizing: border-box;
  padding: 5px;
  /* overflow: hidden; */
}
/* 去除滚动栏，保留滚动效果 */
.Gcontainer::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#three {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 92%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素     */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
  background-color: #282c34;
  position: relative;
}

#bar_rank {
  position: absolute;
  width:55%;height:100%;
  right: 0;
  margin-right: 10px;
  /* overflow: hidden; */
  /* background-color: antiquewhite; */
}

</style>